<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>素材图库</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
		<!--ios是否运行创建快捷启动方式-->
		<meta content="yes" name="apple-mobile-web-app-capable">
		<!--ios顶部通知栏的样式 黑色-->
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<!--遇到数字不让转成电话号码格式-->
		<meta content="telephone=no" name="format-detection">
		<script src="js/remstyle.js"></script>
		<link rel="stylesheet" type="text/css" href="common/css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/open_btn.css" />
		<link rel="stylesheet" href="css/cropper.min.css">
		<link rel="stylesheet" href="css/ImgCropping.css">
		<script src="js/config.js"></script>
		<script type="text/javascript" src="js/vue.js"></script>
		<link rel="stylesheet" type="text/css" href="layer/skin/layer.css" />
		<link rel="stylesheet" type="text/css" href="css/material_photo.css" />

		<!--<script src="js/jaliswall.js" type="text/javascript"></script>
<script src="js/photo_list.js" type="text/javascript"></script>-->
	</head>
	<style>

	</style>

	<body>
		<!--顶部-->
		<div class="top">
			<div class="top-one" onclick="javascript :history.back(-1);">
				<span><img src="img_page/right.png"/></span>
			</div>
			<div class="point" id="my_photo_del">
				<!--<img src="img_page/3point.png" />-->
				管理
			</div>
		</div>
		<!--页面内容-->

		<div id="photo_list" class="material_all">

			<div class="material_con_left">
				<label title="上传图片" class="upload-btn" for="chooseImg" class="l-btn choose-btn">
						<img src="img_page/material_add.png" />
                    <input type="file" accept="image/jpg,image/jpeg,image/png" name="chooseImg" id="chooseImg" class="hidden" onchange="selectImg(this)">
                    添加图片
                </label>
				<div class="material_con" v-for="(v,index) in material_list" v-if="index%2==0" @click="choose_myphoto(v.img_url)">
					<img id="finalImg" :src="v.img_url" />
					<p>{{v.create_time}}</p>
				</div>
			</div>
			<div class="material_con_right">
				<div class="material_con" v-for="(v,index) in material_list" v-if="index%2==1" @click="choose_myphoto(v.img_url)">
					<img id="finalImg" :src="v.img_url" />
					<p>{{v.create_time}}</p>
				</div>
			</div>
		</div>

		<!--图片裁剪框 start-->

		<div style="display: none" class="tailoring-container">

			<div class="black-cloth" id="closeTailor" onclick="closeTailor(this)"></div>

			<div class="tailoring-content">
				<form id="registerForm">
					<div class="tailoring-content-one">
						<div class="close-tailoring" onclick="closeTailor(this)">×</div>
					</div>
					<div class="tailoring-content-two">
						<div class="tailoring-box-parcel">
							<img id="tailoringImg">
						</div>
					</div>
				</form>
				<div class="tailoring-content-three">
					<button class="l-btn cropper-reset-btn">
							<img src="img_page/fuwei.png"/>
							复位</button>
					<button class="l-btn cropper-rotate-btn">
							<img src="img_page/xuanzhuan.png"/>
							旋转</button>
					<button class="l-btn cropper-scaleX-btn">
							<img src="img_page/huanxiang.png"/>
							换向</button>
					<button class="l-btn sureCut" id="sureCut">
							<img src="img_page/sure.png"/>
							确定</button>
				</div>
			</div>

		</div>

		<!--图片裁剪框 end-->

		<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script src="js/cropper.min.js"></script>
		<script src="layer/layer.js"></script>
		<!--<script src="js/jaliswall.js" type="text/javascript"></script>-->
		<!--<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>-->
		<script>
			var aaaa = window.location.href;
			var bbbb = aaaa.substring(aaaa.indexOf('addToTo=') + 8,aaaa.length);
			
			//弹出框水平垂直居中
			(window.onresize = function() {
				var win_height = $(window).height();
				var win_width = $(window).width();
				if(win_width <= 768) {
					$(".tailoring-content").css({
						"top": (win_height - $(".tailoring-content").outerHeight()) / 2,
						"left": 0
					});
				} else {
					$(".tailoring-content").css({
						"top": (win_height - $(".tailoring-content").outerHeight()) / 2,
						"left": (win_width - $(".tailoring-content").outerWidth()) / 2
					});
				}
			})();

			function selectImg(file) {
				console.log(777)
				if(!file.files || !file.files[0]) {
					return;
				}
				$(".tailoring-container").toggle();
				var reader = new FileReader();
				reader.onload = function(evt) {
					var replaceSrc = evt.target.result;
					//更换cropper的图片
					$('#tailoringImg').cropper('replace', replaceSrc, false); //默认false，适应高度，不失真
				}
				reader.readAsDataURL(file.files[0]);
			}
			//cropper图片裁剪
			$('#tailoringImg').cropper({
				//				aspectRatio: 4/3, //默认比例
				preview: '.previewImg', //预览视图
				guides: false, //裁剪框的虚线(九宫格)
				autoCropArea: 1, //0-1之间的数值，定义自动剪裁区域的大小，默认0.8
				movable: false, //是否允许移动图片
				dragCrop: true, //是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域
				movable: true, //是否允许移动剪裁框
				resizable: true, //是否允许改变裁剪框的大小
				zoomable: false, //是否允许缩放图片大小
				mouseWheelZoom: false, //是否允许通过鼠标滚轮来缩放图片
				touchDragZoom: true, //是否允许通过触摸移动来缩放图片
				rotatable: true, //是否允许旋转图片
				crop: function(e) {
					// 输出结果数据裁剪图像。
				}
			});
			//旋转
			$(".cropper-rotate-btn").on("click", function() {
				console.log(1111)
				$('#tailoringImg').cropper("rotate", 45);
				//return false
			});
			//复位
			$(".cropper-reset-btn").on("click", function() {
				$('#tailoringImg').cropper("reset");
				//return false
			});
			//换向
			var flagX = true;
			$(".cropper-scaleX-btn").on("click", function() {
				if(flagX) {
					$('#tailoringImg').cropper("scaleX", -1);
					flagX = false;
				} else {
					$('#tailoringImg').cropper("scaleX", 1);
					flagX = true;
				}
				flagX != flagX;
			});

			//裁剪后的处理
			$("#sureCut").on("click", function() {
layer.load("加载中");
				var base64url = '';
				if($("#tailoringImg").attr("src") == null) {
					return false;
				} else {
					var cas = $('#tailoringImg').cropper('getCroppedCanvas'); //获取被裁剪后的canvas
					base64url = cas.toDataURL('image/png'); //转换为base64地址形式
					$("#finalImg").prop("src", base64url); //显示为图片的形式
					//layer.load("加载中。。。。");
					//关闭裁剪框
					//closeTailor();

					$("#registerForm").attr("enctype", "multipart/form-data");

					var formData = new FormData($("#registerForm")[0]);
					console.log(base64url);
					formData.append("imgBase64", encodeURIComponent(base64url)); //
					formData.append("c_user_id",c_user_id);
					$.ajax({
						url: v_url + "/wechat/material/uploadImg",
						type: 'POST',
						data: formData,
						timeout: 10000, //超时时间设置，单位毫秒
						async: false,
						cache: false,
						contentType: false,
						processData: false,
						success: function(result) {
							console.log(1111);
							layer.closeAll()

							//$(".tailoring-container").toggle();
							window.location.reload()
							
						},
						error: function(returndata) {
							//						console.log(22222)
						}
					});
				}

			});
			//关闭裁剪框
			function closeTailor() {
				//				$(".tailoring-container").toggle();
				window.location.reload();
			}
//管理跳转删除页面
$("#my_photo_del").on("click",function(){
	window.location.href="material_photo_manage.html?c_user_id="+c_user_id
})
			//			查询数据
			var material_list = new Vue({
				el: '.material_all',
				data: {
					material_list: []
				},
				created: function() {
					this.getList();
				},
				methods: {
					getList: function() {
						console.log("11111");
						var that = this;
						$.ajax({
							type: "get",
							url: v_url + "/wechat/material/getUserPhoto",
							data: {
c_user_id:c_user_id
							},
							async: true,
							success: function(res) {
								var list = res.data;
								var new_material_list = [];
								for(var i = 0; i < list.length; i++) {
									new_material_list.push(list[i]);
									var photo_time = list[i]["create_time"];
									var dateee = new Date(photo_time).toJSON();
									var date = new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
									list[i]["create_time"] = date;

								}
								console.log(v_param)

								that.material_list = new_material_list;

								//console.log(that.material_list);
							}
						});

					},
					choose_myphoto: function(img_url) {
						
						if(v_param) {
							console.log(222)
							img_url = "<p><img src='" + img_url + "'/></p>"
							$.ajax({
								type: "get",
								url: v_url+"/wechat/singlepage/saveContent",
								data: {
									id: v_param,
									content: img_url,
									c_user_id:c_user_id
								},
								async: false,
								success: function(res) {
									if(res.code == 200) {
										console.log("保存成功")
										window.location.href = bbbb;
									} else {
										console.log("保存失败")
									}
								}
							});
						}else if(v_page_id){
							console.log(44444)
							$.ajax({
								type: "get",
								url: v_url+"/wechat/singlepage/savePage",
								data: {
									id: v_page_id,
									img_url: img_url,
									c_user_id:c_user_id
								},
								async: false,
								success: function(res) {
									if(res.code == 200) {
										console.log("保存成功")
										window.location.href = bbbb;
									} else {
										console.log("保存失败")
									}
								}
							});
						}
						//console.log(id)
					}
				}
			})
		</script>

	</body>

</html>